<template>
    <div>
        <!-- 角色管理 -->
        <el-card style="height: 2500px" class="card">
            <!-- <div slot="header">
	            <span>角色管理</span>
	        </div> -->
            <el-row>
                <el-form inline="true">
                    
                        <el-form-item label="">
                            <template>
                                <el-select v-model="rolename" clearable placeholder="请选择角色名称" style="width: 100%">
                                    <el-option v-for="item in Rolename" :key="item" :label="item" :value="item" :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                   

                    <el-button type="primary" @click="submitSearchRole">查询</el-button>

                    <el-button type="success" @click="submitAddRole">创建角色</el-button>
                </el-form>
            </el-row>
            <el-row>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%; font-size: 10px"
                    :max-height="tableHeight"
                    :header-row-style="rowStyle"
                    :header-cell-style="cellStyle"
                    :row-style="rowStyle"
                    :cell-style="cellStyle"
                    stripe
                >
                    <el-table-column align="center" prop="sysroleid" label="序号" />
                    <el-table-column align="center" prop="rolename" label="角色名称" />
                    <el-table-column align="center" prop="description" label="角色描述" />
                    <el-table-column label="操作" width="210"  align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <!-- 显示页数 -->
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageIdx"
                    :page-size="pageSizes"
                    :total="totalData"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog title="角色修改" :visible.sync="editVisible" width="60%">
                <el-form :model="form" ref="form" label-width="100px">
                    <!-- 自定义编辑内容样式 -->
                    <el-col :span="12">
                        <el-form-item label="角色名称">
                            <el-input v-model="form.rolename"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色描述">
                            <el-input v-model="form.description"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveNew" v-if="isNewData">确 定</el-button>
                    <el-button type="primary" @click="saveEdit" v-else>确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {
    listAllSysRole,
    getAllSysRole,
    getOneSysRole,
    InsertOneSysRole,
    EditOneSysRole,
    deleteOneSysRole
} from '../../../api/module/systemManagement/RoleManagement';
export default {
data(){
	return{
		rowStyle: { height: '30px' },
		cellStyle: {
			padding: 0,
		},
		tableHeight: this.$route.query.tableHeight,
		tableData:[{}],
		totalData:0,
		editVisible:false,
		isNewData:false,
		form: {},//每行数据
		idx: -1,//修改行id
		Rolename:[],//角色名下拉
		rolename:'',//当前被选中角色名称
		//分页导航
		pageIdx: 1,
		pageSizes: 10,
		totalData: 0,
		//查询行的数据
		searchModel: { //查询部分默认的绑定值
			currentPage: 1, //当前页
			pageSize: 10 ,//页大小
		},
	}
},
methods:{
	//获取下拉列表
	listAllSysRole(){
		listAllSysRole().then(res=>{
			console.log("角色角色角色角色角色角色角色下拉下拉下拉下拉下拉下拉下拉下拉下拉下拉下拉")
			console.log(res)
			this.Rolename=res.data
		})
	},
	//获取表格数据
	getAllSysRole(){
		getAllSysRole(this.searchModel.currentPage,this.searchModel.pageSize).then(res=>{
			console.log("角色角色角色角色角色角色角色角色角色角色角色角色角色22222222222222")
			console.log(res)
			this.tableData=res.data.records
			this.totalData=res.data.total
		})
	},
	//分页导航
	handlePageChange(page) {
	    this.pageIdx = page;
	    this.searchModel.currentPage = page
	    this.getAllSysRole();
	},
	//保存修改数据
	EditOneSysRole() {
	    // console.log(this.form)
	    EditOneSysRole(this.form)
	    .then(res => {
	        console.log(res)
	    })
	    .catch(err => {
	        console.log("保存数据" + err)
	        this.$message.error('保存出错，请刷新！')
	    })
	
	},
	// 点击具体行数据--编辑
	handleEdit (index, row) {
		this.editVisible = true
	    this.idx = index
		this.isNewData = false
		this.form = row
		console.log(row);
	},
	// 保存编辑数据
	saveEdit() {
	    this.editVisible = false;
	    this.$message.success(`修改第 ${this.idx + 1} 行成功`)
	    this.$set(this.tableData, this.idx, this.form) //将展示内容修改
	    //修改数据库数据操作
	    this.EditOneSysRole()
	},
	//保存新增数据
	InsertOneSysRole() {
	    InsertOneSysRole(this.form) 
	    .then(res => {
	        console.log(res)
			console.log(this.form)
	    })
	    .catch(err => {
	        console.log("新增数据" + err)
	        this.$message.error('保存出错，请刷新！')
	    })
	},
	//保存新增
	saveNew() {
	    //新增的代码
	   //新增的代码
	   this.editVisible = false
	   if(this.form.rolename==null){
	   	this.$message.success(`新增数据为空，新增失败`)
	   }else{
	   	this.$message.success(`新增成功`)
	   	this.tableData.push(this.form) //将展示内容修改
	   	this.InsertOneSysRole()
		// this.getAllSysRole()
	   } 
	},
	//新增数据
	submitAddRole () {
	    this.editVisible = true
	    this.isNewData = true
	    this.form = {}
	},
	//删除数据
	deleteOneSysRole(sysroleid) {
	    console.log(this.form.sysroleid)
	    deleteOneSysRole(sysroleid) 
	    .then(res => {
	        console.log(res)
	    })
	    .catch(err => {
	        console.log("删除数据" + err)
	        this.$message.error('删除出错，请刷新！')
	    })
	},
	//点击具体行数据--删除
	handleDelete (index, row) {
		console.log(index)
	    console.log(row)
	    // 二次确认删除
	    this.$confirm('确定要删除吗？', '提示', {
	        type: 'warning'
	    })
	    .then(() => {
	        this.$message.success('删除成功')
	        this.tableData.splice(index, 1)
	        //删除数据库数据操作
			console.log(row.sysroleid)
	        this.deleteOneSysRole(row.sysroleid)
	    })
	    .catch(() => {});
	},
	//按角色名查询
	submitSearchRole(){
		getOneSysRole(this.searchModel.currentPage,this.searchModel.pageSize,this.rolename).then(res=>{
			console.log("角色角色角色角色角色角色角色角色角色角色角色角色角色查询查询查询查询查询查询查询")
			console.log(res)
			this.tableData=res.data.records
			this.totalData=res.data.total
		})
	},
},
created(){
	this.listAllSysRole()
	this.getAllSysRole()
}
// mounted(){
// 	this.listAllSysRole()
// 	this.getAllSysRole()
// }
}
</script>

<style>
.card >>> .el-card__body {
    padding: 5px;
}
.card >>> .el-card__header {
    font-size: 17px;
    padding: 5px 10px;
    /* padding: 5px 10px !important; */
    height: 40px;
    line-height: 30px;
    background-color: #eef0f6;
}
.inputstyle {
    margin-left: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>